import React,{useState,useEffect} from "react";
import { Tabs } from "react-vant";
import axios from "axios";
const Index = () => {
  const [list, setList] = useState<any[]>([]);
  const fetchData = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.list);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      <div className="demo-tabs">
        <Tabs align="start" defaultActive={0}>
          {list &&
            list.map(v => (
              <Tabs.TabPane key={v.id} title={v.title}>
                {v.children &&
                  v.children.map((v: any) => {
                    return (
                      <dl
                        style={{
                          display: "flex",
                          alignItems: "center",
                          padding: "5px 15px",
                        }}
                        key={v.id}
                      >
                        <dt>
                          <img src={v.src} alt="" />
                        </dt>
                        <dd>
                          <h3>{v.title}</h3>
                          <p>{v.word}</p>
                        </dd>
                      </dl>
                    );
                  })}
              </Tabs.TabPane>
            ))}
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
